<template>
  <div class="list">
    <Gheader style="margin-bottom: 6px;background: #ffffff; color: #333333;font-weight: bold" position="center" title="详情"></Gheader>
    <div class="article">
      <div class="register-content form-content">
        <div class="register-content-title"><span>交通体验日</span></div>
<!--        <div class="input-wrapper">-->
<!--          <van-field v-model="form.problemTitle" readonly label="问题标题" placeholder="输入标题" input-align="right" />-->
<!--        </div>-->
<!--        <div class="input-wrapper">-->
<!--          <van-field v-model="form.orgName" readonly label="部门" placeholder="输入部门" input-align="right"  />-->
<!--        </div>-->
        <div class="input-wrapper">
          <van-field v-model="form.roadName" readonly label="道路名称" placeholder="输入道路名称" input-align="right" />
        </div>
        <div class="input-wrapper" v-if="radio==1">
          <van-field v-model="form.intersectionName" readonly label="路口名称" placeholder="输入路口名称" input-align="right" />
        </div>
        <div class="input-wrapper" v-if="radio==2">
          <van-field v-model="form.roadSection" label="路段名称" placeholder="输入路段名称" input-align="right" />
        </div>
        <div class="input-wrapper">
          <van-field v-model="form.problemSort" readonly label="选择问题分类" placeholder="输入问题分类" input-align="right" />
        </div>
        <div class="input-wrapper">
          <van-field v-model="form.trafficWay" readonly label="选择出行方式" placeholder="输入出行方式" input-align="right" />
        </div>
        <div class="input-wrapper">
          <van-field v-model="form.recordTime" readonly label="记录时间" placeholder="输入记录时间" input-align="right" />
        </div>
        <div class="input-wrapper vertical" style="flex-wrap: wrap;height: auto;border-bottom: none;">
          <div class="wrap-name" style="width: 100%;padding-left: 0">
            反映问题描述
          </div>
          <van-field v-model="form.problemDes" readonly style="background: #F4F8FE"  rows="3" autosize type="textarea" placeholder="输入反映问题描述"/>
        </div>
        <div class="input-wrapper vertical" style="flex-wrap: wrap;height: auto;border-bottom: none;">
          <div class="wrap-name" style="width: 100%;padding-left: 0">
            解决建议
          </div>
          <van-field readonly v-model="form.solution" style="background: #F4F8FE"  rows="3" autosize type="textarea" placeholder="输入解决建议"/>
        </div>
      </div>
      <div class="register-content">
        <div class="register-content-title"><span>现场照片</span></div>
        <div class="input-wrapper" style="height: auto">
          <van-uploader v-model="form.fileList" :deletable="false" :max-count="fileList.length"/>
        </div>
      </div>
      <van-button class="subbtn" block type="primary" @click="$router.go(-1)">返回</van-button>
    </div>
  </div>
</template>

<script>
import {Icon, Pagination,Empty, Field, Radio, RadioGroup, Button, Uploader, Toast, Dialog} from 'vant'
import {getuserinfo, createProblem, getProblem, dictData} from '@/api/myapi'
import Gheader from '@/components/Header'
import moment from 'moment'
import ApplyMaterial from "@/components/ApplyMaterial.vue";
export default {
  name: "list",
  components: {
    ApplyMaterial,
    [Icon.name]: Icon,
    [Pagination.name]: Pagination,
    [Empty.name]:Empty,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    Gheader
  },
  data() {
    return {
      form: {},
      activeIcon: require('../../assets/img/checked.png'),
      inactiveIcon: require('../../assets/img/nocheck.png'),
      ApplyMaterialInfoList: [],
      userInfo: {},
      showDia: false,
      disabled: true,
      checkStatus: 0,
      fileList: [],
      problemSortList: [],
      radio: '1'
    }
  },
  methods: {
    moment,
    submitform() {
      this.form.fileList = this.fileList
      createProblem(this.form, res => {
        if(res.code === 0) {
          Toast('申报成功')
          this.$router.go(-1)
        } else {
          Toast(res.msg)
        }
      })
    },
    getuserinfo() {
      getuserinfo(this.$route.query.openid, res=> {
        if(res.code === 0) {
          this.userInfo = res.data || {}
          this.form.recorder = this.userInfo.id
          this.form.name = this.userInfo.name
          this.$forceUpdate()
        } else {
          this.userInfo = {}
        }
      })
    },
    getDetail() {
      getProblem(this.$route.query.id, res => {
        if(res.code === 0) {
          this.form = res.data
          if(this.form.intersectionName) {
            this.radio = 1
          } else if(this.form.roadSection) {
            this.radio = 2
          }
          this.form.recordTime = moment(this.form.recordTime).format('YYYY-MM-DD')
          this.form.fileList.map(e => {
            e.url = e.fileUrl
            e.isImage = true
            return e
          })
          let list = this.trafficWayList.filter(e => e.value == this.form.trafficWay)
          let list2 = this.problemSortList.filter(e => e.value == this.form.problemSort)
          if(list.length) {
            this.form.trafficWay = list[0].label
          }
          if(list2.length) {
            this.form.problemSort = list2[0].label
          }
        }
      })
    },
    async getDict() {
      const {data} = await dictData('traffic_way')
      this.trafficWayList = data
      let res = await dictData('problem_sort')
      this.problemSortList = res.data
      this.getDetail()
    }
  },
  mounted() {
    this.getDict()
    this.getuserinfo()
  }
}
</script>

<style lang="less" scoped>
.list {
  height: 100%;
  overflow: auto;
  background: rgba(237, 243, 252, 1);
  box-sizing: border-box;
  position: relative;
  color: #404040;
  font-weight: normal;
  overflow: hidden;
  padding-bottom: 15px;
  .article {
    padding: 5px 15px;
    height: calc(100% - 60px);
    overflow: auto;
  }
  .list-item {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .list-title {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    .name {
      font-size: 14px;
      flex: 1;
      margin-left: 10px;
    }
  }
  .list-item-content {
    color: #646464;
    padding: 20px 10px;
    .items {
      padding: 6px 0;
      display: flex;
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  height: 40PX;
  margin-bottom: 10px;
  width: 94%;
  margin-left: 3%;
  border: none;
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 2px;
      height: 20px;
      background: #BBBBBB;
    }
  }
  /deep/.van-radio__label {
    color: #B1B1B1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 20px;
  }
  .img-icon {
    height: 13px;
    width: 13px;
  }
}
.tabs {
  width: 98%;
  background: #ffffff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  display: flex;
  .tabitem {
    flex: 1;
    text-align: center;
    &:not(:last-child) {
      border-right: 1px solid #B1B1B1;
    }
    &.active {
      color:#175FB3;
      font-weight: bold;
    }
  }
}
.register-content {
  margin: 10px auto 10px auto;
  background: #ffffff;
  padding-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  .register-content-title {
    display: inline-block;
    background: url('../../assets/img/titlebg.png');
    background-size: 100% 100%;
    padding: 10px 15px 20px 15px;
    color: #ffffff;
  }
  .title {
    position: relative;
    color: #175FB3;
    margin-bottom: 10px;
    padding-left: 20px;
    &.required:before {
      position: absolute;
      left: 2.133vw;
      color: #ee0a24;
      font-size: 3.733vw;
      content: '*';
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  border-radius: 0px;
  height: 40PX;
  margin-bottom: 10px;
  border-bottom: 1px solid #D6E5FC;
  .van-cell {
    padding-left: 10px;
    padding-right: 10px;
    //background: #F4F8FE;
    border-radius: 6px;
  }
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: '';
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 0px;
      height: 22px;
      background: #BBBBBB;
    }
  }
  /deep/.van-radio__label {
    color: #B1B1B1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 18px;
  }
  .img-icon {
    height: 16px;
    width: 16px;
  }
}

.art-list-item {
  padding: 10px 20px 20px 20px;
  border-bottom: 1px solid #dcdcdc;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  box-shadow: -2px -6px 20px rgba(143, 143, 143, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.5s ease;
  .title {
    display: flex;
    align-items: center;
    div {
      flex: 1;
      font-size: 14px;
      padding: 10px 0;
      color: #646464;
    }
    img {
      width: 28px;
      height: 28px;
      margin-left: 14px;
    }
  }
  .list_content {
    height: auto;
    width: 100%;
  }
  .stitle {
    font-size: 15px;
    padding: 10px 0;
    color: #717171;
  }
  .date {
    color: #8c8c8c;
  }
  .item-img {
    width: 100%;
    margin-top: 4px;
  }
}
.btnwrapper {
  display: flex;
  font-weight: bold;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px -2px 5px rgba(0,0,0,0.1);
  .backbtn {
    width: 100%;
    margin-right: 10px;
    background: #ffffff;
    border-color: #3276EB;
    border-radius: 8px;
    color: #3276EB;
  }
  .confirmbtn {
    width: 100%;
    margin-left: 10px;
    background: #3276EB;
    color: #ffffff;
    border-color: #3276EB;
    border-radius: 8px;
  }
}

.subbtn {
  border-color: #3F8CFF;
  height: 46px;
  font-size: 15px;
  width: 100%;
  margin: 20px auto 0 auto;
  border-radius: 10px;
  background: #3276EB;
}
</style>
